<template>
  <div class="my-detail my-wbox" v-loading="loading">
    <el-select v-model="dateString" placeholder="请选择" :disabled="loading" @change="onChange">
      <el-option :label="v" :value="v" v-for="v in dateList" :index="v" size="large" />
    </el-select>
    <h3><i></i>外来人员信息</h3>
    <ul>
      <li>姓名：<span>{{ detail.info.name }}</span></li>
      <li>联系电话：<span>{{ detail.info.phone }}</span></li>
      <li>出发地：<span>{{ detail.info.provinceName }}{{ detail.info.cityName }}{{ detail.info.regionName }}{{
          detail.info.fromAddress
      }}</span></li>
      <li>目的地：<span>{{ detail.info.goalTownName }}{{ detail.info.goalCountryName }}{{ detail.info.goalGroup }}</span>
      </li>
      <li>抵宁时间：<span>{{ detail.info.arriveTime }}</span></li>
      <li>健康码状况：
        <span v-if="detail.info.healthCode == 0" class="c-color0">无</span>
        <span v-if="detail.info.healthCode == 1" class="c-color1">绿码</span>
        <span v-if="detail.info.healthCode == 2" class="c-color2">黄码</span>
        <span v-if="detail.info.healthCode == 3" class="c-color3">红码</span>
      </li>
      <li>
        疫苗接种情况：<span>{{ detail.info.inoculate == 3 ? '第三针' : detail.info.inoculate == 2 ? '第二针' : detail.info.inoculate
            == 1 ?
            '第一针' : detail.info.inoculate == 0 ? '没打针' : '--'
        }}</span>
      </li>
      <li>入宁是否有48小时核酸检测证明：<span>{{ detail.info.come48hour == 1 ? '有' : '无' }}</span></li>
      <li>落地是否24小时核酸检测：<span>{{ detail.info.in24hour == 1 ? '有' : '无' }}</span></li>
      <li>是否成功劝返：<span>{{ detail.info.gobackFlag == 1 ? '劝返' : '没有' }}</span></li>
      <li class="one">管控措施：<span>{{ detail.info.controlAction }}</span></li>
    </ul>
    <el-button @click="onCancel"  size="large">取消</el-button>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { DateListParams, DetailParams } from '@/views/family/interface/interface'
import { dateListApi, detailApi } from '@/views/extra/api/extraApi'
const route = useRoute()
const router = useRouter()
const name = route.query.name as string
const phone = route.query.phone as string
// 下拉时间选择
const loading = ref<boolean>(false)
const dateList = ref<string[]>([])
const dateString = ref<string>('')
let detail = reactive<any>({
  info: {}
})
//取消
const onCancel = () => {
  router.go(-1)
}
//时间信息
const onDateList = async (params: DateListParams) => {
  loading.value = true
  try {
    let res = await dateListApi(params)
    if (res?.code == 0 && res?.data?.length > 0) {
      dateList.value = res.data
      dateString.value = res.data[0]
      onChange()
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
const params = {
  name: name,
  phone: phone
}
onDateList(params)
//时间变化
const onChange = () => {
  let params = {
    name: name,
    phone: phone,
    dateString: dateString.value
  }
  onDetail(params)
}
//获取详情
const onDetail = async (params: DetailParams) => {
  loading.value = true
  try {
    let res = await detailApi(params)
    if (res?.code == 0) {
      detail.info = res.data
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
</script>
<style scoped lang='scss'>
.my-detail {
  h3 {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    margin-top: 20px;
    display: flex;
    align-items: center;

    >i {
      display: block;
      width: 4px;
      height: 14px;
      border-radius: 2px;
      background: $color-primary;
      margin: 0 10px 1px 0;
    }
  }
  ul {
    overflow: hidden;
    margin-top: 20px;

    >li {
      float: left;
      width: 30%;
      margin-bottom: 20px;
      color: #999;

      >span {
        color: #333;
      }
    }

    >li.one {
      width: 100%;
    }
  }
}
</style>